<template>
  <n-modal
    :show="visible"
    preset="card"
    class="w-640 h-480"
    :z-index="10001"
    @close="handleClose"
  >
    <div f-x-c>
      <n-gradient-text type="primary" :size="24">中国传统颜色</n-gradient-text>
    </div>
    <n-tabs>
      <n-tab-pane
        v-for="item in traditionColors"
        :key="item.label"
        :name="item.label"
        :tab="item.label"
      >
        <n-grid :cols="8" :x-gap="16" :y-gap="8">
          <n-grid-item v-for="i in item.data" :key="i.label">
            <color-checkbox
              class="!w-full !h-36 !rd-4"
              :color="i.color"
              :checked="i.color === theme.themeColor"
              icon-class="text-20"
              @click="theme.setThemeColor(i.color)"
            />
            <p class="text-center">{{ i.label }}</p>
          </n-grid-item>
        </n-grid>
      </n-tab-pane>
    </n-tabs>
  </n-modal>
</template>

<script setup lang="ts">
import { traditionColors } from "~/settings";
import { useThemeStore } from "@/store";
import ColorCheckbox from "./color-checkbox.vue";

interface Props {
  visible: boolean;
}

defineProps<Props>();

interface Emits {
  (e: "close"): void;
}

const emit = defineEmits<Emits>();

const theme = useThemeStore();

function handleClose() {
  emit("close");
}
</script>

<style scoped></style>
